<template>
    <CommonCard title="累计订单额" :value="reportData.orderToday">
        <template #default>
            <v-chart :option="option"></v-chart>
        </template>
        <template #footer>
            <span>昨日销售额</span>
            <span class="css-1">¥ {{ reportData.orderLastDay }}</span>
        </template>
    </CommonCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import CommonCard from './CommonCard.vue'
const props = defineProps({
    reportData: {
        type: Object,
        required: true,
    },
})
const option = ref({})

const renderChart = (data) => {
    option.value = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            show: false,
        },
        yAxis: {
            type: 'value',
            show: false,
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },
        series: {
            type: 'line',
            data: data,
            areaStyle: {
                color: 'purple',
            },
            itemStyle: {
                opacity: 0,
            },
            lineStyle: {
                opacity: 0,
            },
            smooth: true,
        },
    }
}

watch(props, () => {
    renderChart(props.reportData.orderTrend)
})
</script>

<style scoped></style>